<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>


<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>商城-常用联系人</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 为开发方便为,所使用的JS和CSS文件本地引用，在生产环境中请考虑使用CDN加速服务 -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
  <!-- 以下为IE8的兼容性脚本，如果从文件夹中直接打开页面无效，需要部署到服务器端访问才能生效 -->
  <!--[if lt IE 9]>
  <script src="${pageContext.request.contextPath}/js/html5shiv.js"></script>
  <script src="${pageContext.request.contextPath}/js/respond.min.js"></script>
  <![endif]-->
</head>
<body>
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
          <!-- 这里插入LOGO图标 -->
          <!-- <img alt="LOGO" src="images/logo.png"/>-->LOL网上商城
        </a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
              <li class="dropdown" id="car">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">我的购物车<span style="color: #ffff00">${sessionScope.carSize }<c:if test="${empty sessionScope.carSize }">0</c:if></span>件</a>
                  <ul class="dropdown-menu" role="menu">
                  	<c:forEach items="${sessionScope.car }" var="carBean">
                      <li><a href="${pageContext.request.contextPath}/customer/showProductDetail.action?commodityId=${carBean.value.commodity.id}">${carBean.value.commodity.commodityName }<span class="badge">${carBean.value.count }</span></a></li>
                    </c:forEach>
                      <li class="divider"></li>
                      <li><a href="#">共<span style="color: red">${sessionScope.totalPrice }<c:if test="${empty sessionScope.totalPrice }">0</c:if></span>元</a><a href="${pageContext.request.contextPath}/customer/showCar.action" class="btn btn-default">结算</a></li>
                  </ul>
              </li>
          </ul>
          <form class="navbar-form navbar-right" role="search" action="${pageContext.request.contextPath}/customer/showProduct.action">
              <div class="form-group">
                  <input type="text" class="form-control" name="commName" placeholder="输入商品进行查询">
              </div>
              <button type="submit" class="btn btn-default">搜索</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
              <li>
                  <a href="${pageContext.request.contextPath}/customer/index.action">首页</a>
              </li>
              <li>
                  <a href="${pageContext.request.contextPath}/customer/showProduct.action">商品列表</a>
              </li>
              <c:if test="${sessionScope.user==null }">
	              <li>
	                  <a href="${pageContext.request.contextPath}/customer/user_loginUI.action">登录</a>
	              </li>
	              <li>
	                  <a href="${pageContext.request.contextPath}/customer/user_registerUI.action">注册</a>
	              </li>
              </c:if>
              <c:if test="${sessionScope.user!=null }">
              	  <li>
	                  	<a href="">欢迎，${sessionScope.user.userAccount }</a>
	              </li>
	              <li>
	                  <a href="${pageContext.request.contextPath}/customer/user_logout.action" onclick="return confirm('确定要注销吗？')">注销</a>
	              </li>
	              <li class="dropdown active">
	                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">个人中心</a>
	                  <ul class="dropdown-menu" role="menu">
	                      <li><a href="${pageContext.request.contextPath}/customer/showDataSet.action">资料设置</a></li>
	                      <li><a href="${pageContext.request.contextPath}/customer/showAccount.action">账户</a></li>
	                      <li><a href="${pageContext.request.contextPath}/customer/showOrder.action">我的订单</a></li>
	                  </ul>
	              </li>
              </c:if>
          </ul>
      </div>
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <img src="${pageContext.request.contextPath}/img/dai.png">
      </div>
    </div>
    <br>
    <div class="row">
        <div class="col-xs-3">
            <div class="invite-block">
                <ul class="nav nav-pills nav-stacked" role="tablist">
                    <li role="presentation"><a href="${pageContext.request.contextPath}/customer/showDataSet.action">资料设置</a></li>
                    <li role="presentation"><a href="${pageContext.request.contextPath}/customer/showAccount.action">账户</a></li>
                    <li role="presentation"><a href="${pageContext.request.contextPath}/customer/showOrder.action">我的订单</a></li>
                    <li role="presentation"><a href="${pageContext.request.contextPath}/customer/showContact.action">常用联系人</a></li>
                    <li role="presentation"><a href="${pageContext.request.contextPath}/customer/showComplain.action">投诉</a></li>
                </ul>
            </div>
        </div>
      <div class="col-xs-9">
          <div class="invite-block">
              <div class="row">
                  <div class="col-xs-12 page-header">
                      <div class="col-xs-12">
                          <h4>
                              常用联系人&nbsp;&nbsp;
                          </h4><a href="" data-toggle="modal" data-target="#addContactBlock">新增联系人</a>
                      </div>
                      <div class="modal fade" id="addContactBlock" tabindex="-1" role="dialog" aria-hidden="true">
					    <div class="modal-dialog">
					      <div class="modal-content">
					        <div class="modal-header">
					          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
					          <h4 class="modal-title">新增联系人</h4>
					        </div>
					        <div class="modal-body">
					          	<form class="form-horizontal" role="form" action="${pageContext.request.contextPath}/customer/addContact.action" method="post">
					            	<div class="form-group">
                                      <label for="realName" class="col-sm-2 control-label">姓名</label>
                                      <div class="col-sm-10">
                                          <input type="text" class="form-control" id="realName" name="contact.contactName" placeholder="真实姓名">
                                      </div>
                                  	</div>
                                  	<div class="form-group">
                                      <label for="mobile" class="col-sm-2 control-label">手机号</label>
                                      <div class="col-sm-10">
                                          <input type="text" class="form-control" id="mobile" name="contact.mobile" placeholder="手机号">
                                      </div>
                                  	</div>
                                  	<div class="form-group">
                                      <label for="address" class="col-sm-2 control-label">收货地址</label>
                                      <div class="col-sm-10">
                                          <input type="text" class="form-control" id="address" name="contact.address" placeholder="收货地址">
                                      </div>
                                  	</div>
                                  	<div class="form-group text-center">
                                  		<button type="submit" class="btn btn-default">添加</button>
                                  	</div>
					        	</form>
					          </div>
					          <div class="modal-footer">
					            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					          </div>
					      </div>
					    </div>
					  </div>
                  </div>
                  
                  <div class="col-xs-12">
                      <table class="table table-hover">
                          <thead>
                              <tr>
                                  <th>联系人</th>
                                  <th>联系电话</th>
                                  <th>联系地址</th>
                                  <th>操作</th>
                              </tr>
                          </thead>
                          <tbody>
                          	<c:forEach items="${contactPageBean.recordList }" var="contact">
                               <tr>
                                    <td>${contact.contactName }</td>
                                    <td>${contact.mobile }</td>
                                    <td>${contact.address }</td>
                                    <td><a href="" data-toggle="modal" data-target="#editContactBlock_${contact.id}">修改</a>&nbsp;<a href="${pageContext.request.contextPath}/customer/deleteContact.action?contactId=${contact.id}" onclick="return confirm('确定要删除吗？')">删除</a></td>
                               </tr>
                               <div class="modal fade" id="editContactBlock_${contact.id}" tabindex="-1" role="dialog" aria-hidden="true">
					    <div class="modal-dialog">
					      <div class="modal-content">
					        <div class="modal-header">
					          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
					          <h4 class="modal-title">修改联系人</h4>
					        </div>
					        <div class="modal-body">
					          	<form class="form-horizontal" role="form" action="${pageContext.request.contextPath}/customer/editContact.action" method="post">
					            	<input type="hidden" name="contact.id" value="${contact.id}">
					            	<input type="hidden" name="contact.status" value="${contact.status}">
					            	<input type="hidden" name="contact.insertTime" value="${contact.insertTime}">
					            	<div class="form-group">
                                      <label for="realName" class="col-sm-2 control-label">姓名</label>
                                      <div class="col-sm-10">
                                          <input type="text" class="form-control" id="realName" name="contact.contactName" value="${contact.contactName}" placeholder="真实姓名">
                                      </div>
                                  	</div>
                                  	<div class="form-group">
                                      <label for="mobile" class="col-sm-2 control-label">手机号</label>
                                      <div class="col-sm-10">
                                          <input type="text" class="form-control" id="mobile" name="contact.mobile" value="${contact.mobile}" placeholder="手机号">
                                      </div>
                                  	</div>
                                  	<div class="form-group">
                                      <label for="address" class="col-sm-2 control-label">收货地址</label>
                                      <div class="col-sm-10">
                                          <input type="text" class="form-control" id="address" name="contact.address" value="${contact.address}" placeholder="收货地址">
                                      </div>
                                  	</div>
                                  	<div class="form-group text-center">
                                  		<button type="submit" class="btn btn-default">修改</button>
                                  	</div>
					        	</form>
					          </div>
					          <div class="modal-footer">
					            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					          </div>
					      </div>
					    </div>
					  </div>
                            </c:forEach>
                          </tbody>
                      </table>
                  </div>
                  <div class="col-md-12 col-md-offset-7">
                  <nav>
                      <ul class="pagination">
                      	  <c:forEach begin="${contactPageBean.beginPageIndex }" end="${contactPageBean.endPageIndex }" var="num">
                      	  	  <c:if test="${num==contactPageBean.beginPageIndex }"><li><a href="${pageContext.request.contextPath}/customer/showContact.action?pageNum=${contactPageBean.beginPageIndex }">&laquo;</a></li></c:if>
	                          <c:if test="${num==contactPageBean.currentPage}"><li class="active"><a href="">${num }</a></li></c:if>
	                          <c:if test="${num!=contactPageBean.currentPage}"><li><a href="${pageContext.request.contextPath}/customer/showContact.action?pageNum=${num }">${num }</a></li></c:if>
	                          <c:if test="${num==contactPageBean.endPageIndex }"><li><a href="${pageContext.request.contextPath}/customer/showContact.action?pageNum=${contactPageBean.endPageIndex }">&raquo;</a></li></c:if>
                          </c:forEach>
                      </ul>
                  </nav>
              </div>
              </div>
          </div>
      </div>
    </div>
</div>
</div>



  <footer class="footer">
    <div class="container">
      <div class="row">
        <div class="col-xs-12"><p class="text-center">COPYRIGHT &copy; 2014 LUOJIE. ALL RIGHTS RESERVED.</p></div>
      </div>
    </div>
  </footer>

  <!-- 外部JS脚本文件 -->
  <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
  <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
</body>

</html>